<template>
  <div class="movie-list">
    <div v-for="movie in movies" :key="movie.id" class="movie-item">
      <img :src="movie.poster" alt="电影海报">
      <h3>{{ movie.title }}</h3>
      <p>评分: {{ movie.rating }}</p>
      <button @click="selectMovie(movie)">选择这部电影</button>
      <!-- 新增座位表展示区域（初始隐藏） -->
      <div v-if="showSeatTable && selectedMovie === movie" class="seat-table-container">
        <h4>座位表</h4>
        <table>
          <thead>
            <tr>
              <th v-for="col in seatCols" :key="col">{{ col }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in seatRows" :key="rowIndex">
              <td v-for="col in seatCols" :key="`${rowIndex}-${col}`">
                <button
                  :class="{'occupied': isSeatOccupied(rowIndex, col)}"
                  :disabled="isSeatOccupied(rowIndex, col)"
                  @click="selectSeat(rowIndex, col)"
                >
                  {{ getSeatLabel(rowIndex, col) }}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 已选座位展示 -->
        <p>已选座位: <span v-for="seat in selectedSeats" :key="seat">{{ seat }}</span></p>
      </div>
    </div>
  </div>
</template>
  
  <script>
  export default {
    name: 'MovieList',
    data() {
      return {
        movies: [], // 这里初始为空，后续从接口获取数据填充
        showSeatTable: false, // 控制座位表是否显示的变量
        selectedMovie: null, // 记录当前选择查看座位表的电影对象
        seatRows: 10, // 座位行数
        seatCols: ['1', '2', '3', '4', '5'], // 座位列标识
        seatStatus: {}, // 用于记录座位的占用情况，格式如 { '0-A': true, '1-B': false } 等，表示对应座位是否被占用
        selectedSeats: [] // 已选座位列表
      };
    },
    mounted() {
      // 模拟调用接口获取电影数据，实际中替换为真实的axios等请求
      this.movies = [
        {
          id: 1,
          title: '电影1',
          rating: 8.5,
          poster: '../public/奥特曼战队.png'
        },
        {
          id: 2,
          title: '电影2',
          rating: 7.8,
          poster: '../public/可选.png'
        }
      ];
      // 初始化座位占用状态（这里简单模拟部分座位已被占用）
      this.initSeatStatus();
    },
    methods: {
      selectMovie(movie) {
        // 这里可以将选择的电影信息传递给父组件或者存储到Vuex等状态管理中
        console.log(`选择了电影: ${movie.title}`);
        alert(`选择了电影: ${movie.title}`);
        // 选择电影后，设置当前选择的电影对象，并显示座位表
        this.selectedMovie = movie;
        this.showSeatTable = true;
      },
      initSeatStatus() {
        // 模拟随机设置一些座位为已占用
        for (let row = 0; row < this.seatRows; row++) {
          for (let col of this.seatCols) {
            const seatKey = `${row}-${col}`;
            this.seatStatus[seatKey] = Math.random() < 0.3; // 30%概率座位被占用
          }
        }
      },
      isSeatOccupied(rowIndex, col) {
        const seatKey = `${rowIndex}-${col}`;
        return this.seatStatus[seatKey] || false;
      },
      getSeatLabel(rowIndex, col) {
        return `${rowIndex + 1}-${col}`;
      },
      selectSeat(rowIndex, col) {
        const seat = `${rowIndex + 1}-${col}`;
        const index = this.selectedSeats.indexOf(seat);
        if (index > -1) {
          // 如果座位已选，移除它
          this.selectedSeats.splice(index, 1);
        } else {
          // 否则添加到已选座位列表
          this.selectedSeats.push(seat);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .seat-table-container {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}

.occupied {
  background-color: #ccc;
  color: white;
}
  </style>